{extend name="common:frm_base" /}
{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-group">
                <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">订单信息</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div style="padding: 20px; background-color: #F2F2F2;">
                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-md12">
                                        <div class="layui-card">
                                            <div class="layui-card-header">订单概要</div>
                                            <div class="layui-card-body">
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>订单编号:</span>
                                                        <span>{$info->order_sn}</span>
                                                    </div>

                                                    <div class="layui-col-md6">
                                                        <span style="color: #FF5722">订单状态:</span>
                                                        <span style="color: #FF5722" id="status_text">{$info->status}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>接站点:</span>
                                                        <span>{$info->site}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>预约时间:</span>
                                                        <span>{$info->use_time}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>开始城市:</span>
                                                        <span>{$info->start_city}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>到达城市:</span>
                                                        <span>{$info->end_city}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>联系人:</span>
                                                        <span>{$info->realname}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>联系电话:</span>
                                                        <span>{$info->mobile}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>返程时间:</span>
                                                        <span>{$info->back_time}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>返程上车站点:</span>
                                                        <span>{$info->back_site}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>人数:</span>
                                                        <span>{$info->number}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>创建时间:</span>
                                                        <span>{$info->create_time}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md6">
                                                        <span>订单金额:</span>
                                                        <span id="order_price">{$info->order_price}</span>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <span>优惠金额:</span>
                                                        <span id="coupon_price">{$info->coupon_price}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md12">
                                                        <span>付款金额:</span>
                                                        <span id="">{$info->pay_price}</span>
                                                    </div>
                                                </div>
                                                <div class="layui-row">
                                                    <div class="layui-col-md12">
                                                        <span>备注:</span>
                                                        <textarea id="remark" placeholder="请输入备注" class="layui-textarea">{$info->remark}</textarea>
                                                    </div>
                                                </div>
                                                <div class="layui-row" style="padding-top: 10px;">
                                                    <div class="layui-col-md4">
                                                        <span>操作:</span>
                                                        {if $role['role_id']!=2 && $role['role_id']!=3}
                                                        <span><button type="button" id="update_status" class="layui-btn layui-btn-xs">修改状态</button></span>
                                                        {else /}

                                                        {if $info->status=='进行中' && $role['role_id']!=3}
                                                        <span><button type="button" id="driver" class="layui-btn layui-btn-xs">分配司机</button></span>
                                                        {/if}
                                                        
                                                        {/if}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">内容2</div>
                        <div class="layui-tab-item">内容3</div>
                    </div>
                </div>
                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-input-block">-->
                        <input type="hidden" value="{$info->id}" name="order_id" />
                        <!--<button class="layui-btn" lay-submit lay-filter="formSub">立即提交</button>-->
                        <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                    <!--</div>-->
                <!--</div>-->
            </form>
        </div>
    </div>
</div>

<script>
    layui.config({
        base: '__LAYUIADMIN__/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;

        form.on('submit(formSub)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form.action) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var param = data.field;
            $.ajax({
                type: 'POST'
                ,url: data.form.action
                ,data: param
                ,dataType: 'json'
                ,success:function(res){
                    if (res.code == 0){
                        layer.alert("提交成功");
                    } else{
                        layer.alert(res.msg);
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //提交订单备注
        $("#update_remark").click(function(){
            layer.confirm('确定要提交备注吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var url = "{:url('order/handle')}";
                var remark = $("#remark").val();
                var order_id = $("input[name='order_id']").val();
                $.ajax({
                    type: 'POST'
                    ,url: url
                    ,data: {order_id:order_id, remark:remark, 'act':'remark'}
                    ,dataType: 'json'
                    ,success:function(res){
                        if (res.code == 0){
                            layer.alert("提交成功");
                        } else{
                            layer.alert(res.msg);
                        }
                    }
                })
            });
        });

        //修改订单状态
        $("#update_status").click(function(){
            var status_url = "{:url('order/update_status',['order_id'=>$info->id, 'status'=>$info->getData('status')])}";
            layer.open({
                type: 2
                , title: '修改订单状态'
                , content: status_url
                , maxmin: true
                , area: ['80%', '90%']
                , shadeClose: true
                , scrollbar: false
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-front-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: data.form.action,
                            data: field,
                            type: 'POST',
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.alert(res.msg);
                                    table.reload('LAY-user-manage'); //数据刷新
                                    layer.close(index); //关闭弹层
                                    //更新金额数据
                                    var data = res.data;
                                    $("#status_text").html(data.status_text);
                                } else {
                                    layer.alert(res.msg);
                                    var obj = layero.find('iframe').contents().find("input[name='__token__']");
                                    reload_token(obj);
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

        //修改订单状态
        $("#driver").click(function(){
            var status_url = "{:url('order/driver',['order_id'=>$info->id, 'status'=>$info->getData('status')])}";
            layer.open({
                type: 2
                , title: '修改订单状态'
                , content: status_url
                , maxmin: true
                , area: ['80%', '90%']
                , shadeClose: true
                , scrollbar: false
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-front-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: data.form.action,
                            data: field,
                            type: 'POST',
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.alert(res.msg);
                                    table.reload('LAY-user-manage'); //数据刷新
                                    layer.close(index); //关闭弹层
                                    //更新金额数据
                                    var data = res.data;
                                    $("#status_text").html(data.status_text);
                                } else {
                                    layer.alert(res.msg);
                                    var obj = layero.find('iframe').contents().find("input[name='__token__']");
                                    reload_token(obj);
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

        //更新订单金额
        $("#update_price").click(function(){
            var price_url = "{:url('order/update_price',['order_id'=>$info->id])}";
            layer.open({
                type: 2
                , title: '调整订单价格'
                , content: price_url
                , maxmin: true
                , area: ['80%', '90%']
                , shadeClose: true
                , scrollbar: false
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-front-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: data.form.action,
                            data: field,
                            type: 'POST',
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.alert(res.msg);
                                    table.reload('LAY-user-manage'); //数据刷新
                                    layer.close(index); //关闭弹层
                                    //更新金额数据
                                    var data = res.data;
                                    $("#order_price").html(data.order_price);
                                    $("#coupon_price").html(data.coupon_price);
                                    $("#pay_price").html(data.pay_price);
                                } else {
                                    layer.alert(res.msg);
                                    var obj = layero.find('iframe').contents().find("input[name='__token__']");
                                    reload_token(obj);
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });
        
    });
</script>
</body>
</html>
{/block}
